<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号排版工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #2C3E50 0%, #34495E 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            font-weight: 300;
        }

        .header p {
            opacity: 0.9;
            font-size: 1.1em;
        }

        .main-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
            min-height: 600px;
        }

        .editor-section {
            background: #f8f9fa;
            padding: 25px;
            border-right: 1px solid #e9ecef;
        }

        .preview-section {
            background: white;
            padding: 25px;
            position: relative;
        }

        .section-title {
            font-size: 1.3em;
            color: #2C3E50;
            margin-bottom: 15px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .section-title::before {
            content: '';
            width: 4px;
            height: 20px;
            background: linear-gradient(135deg, #0081FF 0%, #00BFFF 100%);
            border-radius: 2px;
        }

        .editor-container {
            background: white;
            border: 2px solid #e9ecef;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .editor-header {
            background: #f8f9fa;
            padding: 12px 20px;
            border-bottom: 1px solid #e9ecef;
            font-weight: 600;
            color: #2C3E50;
        }

        textarea {
            width: 100%;
            min-height: 200px;
            border: none;
            padding: 20px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 14px;
            line-height: 1.6;
            resize: vertical;
            outline: none;
        }

        textarea:focus {
            background: #fafafa;
        }

        .css-editor {
            min-height: 250px;
        }

        .button-group {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #0081FF 0%, #00BFFF 100%);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 129, 255, 0.3);
        }

        .btn-success {
            background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            color: white;
        }

        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(39, 174, 96, 0.3);
        }

        .btn-secondary {
            background: #95a5a6;
            color: white;
        }

        /* 样式模板选择器样式 */
        .style-selector-container {
            background: white;
            border: 2px solid #e9ecef;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .style-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 15px;
        }

        .style-btn {
            padding: 8px 16px;
            border: 2px solid #e9ecef;
            border-radius: 6px;
            background: #f8f9fa;
            color: #2C3E50;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .style-btn:hover {
            border-color: #0081FF;
            background: #e3f2fd;
        }

        .style-btn.active {
            background: linear-gradient(135deg, #0081FF 0%, #00BFFF 100%);
            color: white;
            border-color: #0081FF;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .style-buttons {
                flex-direction: column;
            }
            
            .style-btn {
                width: 100%;
            }
        }

        .preview-container {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 12px;
            overflow: hidden;
            min-height: 500px;
        }

        .preview-content {
            padding: 30px;
            min-height: 500px;
            background: white;
        }

        .placeholder {
            color: #95a5a6;
            text-align: center;
            margin-top: 50px;
            font-style: italic;
        }

        .copy-notice {
            position: fixed;
            top: 20px;
            right: 20px;
            background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            color: white;
            padding: 15px 25px;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(39, 174, 96, 0.4);
            transform: translateX(100%);
            opacity: 0;
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .copy-notice.show {
            transform: translateX(0);
            opacity: 1;
        }

        .footer {
            background: #2C3E50;
            color: white;
            text-align: center;
            padding: 20px;
            font-size: 0.9em;
        }

        .footer p {
            margin: 5px 0;
            opacity: 0.8;
        }

        /* 响应式设计 */
        @media (max-width: 968px) {
            .main-content {
                grid-template-columns: 1fr;
            }
            
            .editor-section {
                border-right: none;
                border-bottom: 1px solid #e9ecef;
            }
            
            .header h1 {
                font-size: 2em;
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 10px;
            }
            
            .header {
                padding: 20px;
            }
            
            .header h1 {
                font-size: 1.5em;
            }
            
            .btn {
                padding: 10px 16px;
                font-size: 12px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>公众号排版工具</h1>
            <p>Markdown编辑 + CSS自定义 + 实时预览 + 一键复制到公众号</p>
        </header>

        <div class="main-content">
            <div class="editor-section">
                <div class="editor-container">
                    <div class="editor-header">内容编辑 (Markdown格式)</div>
                    <textarea id="markdownInput" placeholder="在这里输入Markdown格式的内容...

示例：
# 一级标题
## 二级标题
### 三级标题

普通段落文字

- 无序列表项
- 另一个列表项

1. 有序列表项
2. 另一个有序项

> 引用内容

**加粗文字** *斜体文字*"></textarea>
                </div>

                <!-- 样式模板选择器 -->
                <div class="style-selector-container">
                    <div class="editor-header">样式模板选择</div>
                    <div class="style-buttons">
                        <button class="style-btn active" data-style="default">默认样式</button>
                        <button class极="style-btn" data-style="minimal">简约风格</button>
                        <button class="style-btn" data-style="elegant">优雅风格</button>
                        <button class="style-btn" data-style="modern">现代风格</button>
                        <button class="style-btn" data-style="classic">经典风格</button>
                    </div>
                </div>

                <div class="editor-container">
                    <div class="editor-header">自定义CSS样式</div>
                    <textarea id="cssInput" class="css-editor">/* @author W的书房
 * 全局属性
 * 页边距 padding: 30px;
 * 全文字体 font-family: ptima-Regular;
 * 英文换行 word-break: break-all;
 */
#nice {
  counter-reset: counterh1 counterh2;
  padding: 5px 5px;
  font-family: system-ui,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Arial,sans-serif;
  font-size: 16px;
}

#nice p {
  font-family: system-ui,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Arial,sans-serif;
  line-height: 28px;
  font-size: 16px;  
  font-weight: 400;
  color: rgb(0, 0, 0);
}

#nice h1 {
  line-height: 28px;
  border-bottom: 1px solid rgb(37,132,181);
}

#nice h1:before {
  background: rgb(37,132,181);
  color: white;
  counter-increment: counterh1;
  content: 'Part'counter(counterh1); 
  padding: 2px 8px;
}

#nice h1 .content {
  color: rgb(37,132,181);
  margin-left: 8px;
  font-size: 20px;
}

#nice h2 .content {
  font-size: 18px;
  border-bottom: 4px solid rgb(37,132,181);
  padding: 2px 4px;
  color: rgb(37,132,181);
}

#nice h2 .prefix:before {
  counter-increment: counterh2;
  content: counter(counterh2); 
  color:rgb(159,205,208);
  border-bottom: 4px solid rgb(159,205,208);
  font-size: 18px;
  padding: 2px 4px;
}

#nice h3 .content {
  font-size: 16px;
  border-bottom: 1px solid rgb(37,132,181);
  padding: 2px 10px;
  color: rgb(37,132,181);
}

#nice a {
  color:rgb(37,132,181);
  border-bottom: 1px solid rgb(37,132,181);
}

#nice strong {
  color: rgb(37,132,181);
}

#nice em {
  color: rgb(37,132,181);
}

#nice hr {
  border-top: 1px dashed #87c5de;
}

#nice img {
  border: 1px dashed #87c5de;
  border-radius: 4px;
  padding: 5px;
}</textarea>
                </div>

                <div class="button-group">
                    <button id="previewBtn" class="btn btn-primary">刷新预览</button>
                    <button id="copyBtn" class="btn btn-success">复制到公众号</button>
                    <button id="clearBtn" class="btn btn-secondary">清空内容</button>
                </div>
            </div>

            <div class="preview-section">
                <div class="section-title">预览效果</div>
                <div class="preview-container">
                    <div id="previewArea" class="preview-content">
                        <p class="placeholder">在左侧输入内容后点击"刷新预览"查看样式效果</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="copy-notice" id="copyNotice">
            ✅ 已复制到剪贴板！可以直接粘贴到微信公众号编辑器
        </div>

        <footer class="footer">
            <p>提示：复制后的内容可以直接粘贴到微信公众号编辑器中，保持样式不变</p>
            <p>快捷键：Ctrl+Enter 刷新预览 | Ctrl+Shift+C 复制内容</p>
        </footer>
    </div>

    <script>
        // 获取DOM元素
        const markdownInput = document.getElementById('markdownInput');
        const cssInput = document.getElementById('cssInput');
        const previewBtn = document.getElementById('previewBtn');
        const copyBtn = document.getElementById('copyBtn');
        const clearBtn = document.getElementById('clearBtn');
        const previewArea = document.getElementById('previewArea');
        const copyNotice = document.getElementById('copyNotice');
        const styleButtons = document.querySelectorAll('.style-btn');

        // 预设样式模板
        const styleTemplates = {
            default: `/* @author W的书房 - 默认样式 */
#nice {
  counter-reset: counterh1 counterh2;
  padding: 5px 5px;
  font-family: system-ui,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Arial,sans-serif;
  font-size: 16px;
}

#nice p {
  font-family: system-ui,BlinkMacSystemFont,Helvetica Neue,Ping极Fang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Arial,sans-serif;
  line-height: 28px;
  font-size: 16px;  
  font-weight: 400;
  color: rgb(0, 0, 0);
}

#nice h1 {
  line-height: 28px;
  border-bottom: 1px solid rgb(37,132,181);
}

#nice h1:before {
  background: rgb(37,132,181);
  color: white;
  counter-increment: counterh1;
  content: 'Part'counter(counterh1); 
  padding: 2px 8px;
}

#nice h1 .content {
  color: rgb(37,132,181);
  margin-left: 8px;
  font-size: 20px;
}

#nice h2 .content {
  font-size: 18px;
  border-bottom: 4px solid rgb(37,132,181);
  padding: 2px 4px;
  color: rgb(37,132,181);
}

#nice h2 .prefix:before {
  counter-increment: counterh2;
  content: counter(counterh2); 
  color:rgb(159,205,208);
  border-bottom: 极4px solid rgb(159,205,208);
  font-size: 18px;
  padding: 2px 4px;
}

#nice h3 .content {
  font-size: 16px;
  border-bottom: 1px solid rgb(37,132,181);
  padding: 2px 10px;
  color: rgb(37,132,181);
}

#nice a {
  color:rgb(37,132,181);
  border-bottom: 1px solid rgb(37,132,181);
}

#nice strong {
  color: rgb(37,132,181);
}

#nice em {
  color: rgb(37,132,181);
}

#nice hr {
  border-top: 1px dashed #87c5de;
}

#nice img {
  border: 1px dashed #87c5de;
  border-radius: 4px;
  padding: 5px;
}`,

            minimal: `/* 简约风格 - 简洁现代 */
#nice {
  padding: 20px;
  font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

#nice p {
  margin: 15px 0;
  line-height: 1.8;
}

#nice h1 {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin: 30px 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #3498db;
}

#nice h2 {
  font-size: 20px;
  font-weight: 600;
  color: #34495e;
  margin: 25px 0 15px 0;
}

#nice h3 {
  font-size: 18px;
  font-weight: 500;
  color: #7f8c8d;
  margin: 20px 0 12px 0;
}

#nice ul, #nice ol {
  margin: 15px 0;
  padding-left: 25px;
}

#nice li {
  margin: 8px 0;
}

#nice a {
  color: #2980b9;
  text-decoration: none;
}

#nice a:hover {
  text-decoration: underline;
}

#nice strong {
  color: #e74c3c;
  font-weight: 600;
}

#nice em {
  color: #9b59b6;
  font-style: italic;
}

#nice hr {
  border: none;
  border-top: 1px solid #bdc3c7;
  margin: 30px 0;
}

#nice blockquote {
  background: #f8f9fa;
  border-left: 4px solid #3498db;
  padding: 15px 20px;
  margin: 20px 0;
  border-radius: 4px;
}`,

            elegant: `/* 优雅风格 - 精致典雅 */
#nice {
  padding: 30px;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.7;
  color: #4a4a4a;
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
}

#nice p {
  margin: 18px 0;
  line-height: 1.7;
  text-align: justify;
}

#nice h1 {
  font-size: 28px;
  font-weight: 300;
  color: #8b4513;
  text-align: center;
  margin: 40px 0 25px 0;
  letter-spacing: 2px;
}

#nice h2 {
  font-size: 22px;
  font-weight: 400;
  color: #a0522d;
  margin: 30px 0 18px 0;
  border-left: 4px solid #d2b48c;
  padding-left: 15px;
}

#nice h3 {
  font-size: 18px;
  font-weight: 500;
  color: #cd853f;
  margin: 25px 0 15px 0;
  font-style: italic;
}

#nice ul, #nice ol {
  margin: 18px 0;
  padding-left: 30px;
}

#nice li {
  margin: 10px 0;
}

#nice a {
  color: #8b5a2b;
  text-decoration: none;
  border-bottom: 1px dotted #d2b48c;
}

#nice a:hover {
  color: #654321;
  border-bottom: 1px solid #8b5a2b;
}

#nice strong {
  color: #8b4513;
  font-weight: 600;
}

#nice em {
  color: #a0522d;
  font-style: italic;
}

#nice hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d2b48c, transparent);
  margin: 35px 0;
}

#nice blockquote {
  background: rgba(210, 180, 140, 0.1);
  border-left: 3px solid #d2b48c;
  padding: 20px;
  margin: 25px 0;
  font-style: italic;
  border-radius: 3px;
}`,

            modern: `/* 现代风格 - 时尚潮流 */
#nice {
  padding: 25px;
  font-family: 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #2d3748;
  background: #ffffff;
}

#nice p {
  margin: 16px 0;
  line-height: 1.6;
}

#nice h1 {
  font-size: 32px;
  font-weight: 700;
  color: #1a202c;
  margin: 35px 0 20px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

#nice h2 {
  font-size: 24px;
  font-weight: 600;
  color: #2d3748;
  margin: 28px 0 16px 0;
  padding: 10px 0;
  border-bottom: 3px solid #667eea;
}

#nice h3 {
  font-size: 20px;
  font-weight: 500;
  color: #4a5568;
  margin: 22px 0 14px 0;
}

#nice ul, #nice ol {
  margin: 16px 0;
  padding-left: 28px;
}

#nice li {
  margin: 8px 0;
  padding: 4px 0;
}

#nice a {
  color: #4299e1;
  text-decoration: none;
  font-weight: 500;
}

#nice a:hover {
  color: #3182ce;
  text-decoration: underline;
}

#nice strong {
  color: #e53e3e;
  font-weight: 600;
}

#nice em {
  color: #805ad5;
  font-style: italic;
}

#nice hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
  margin: 32px 0;
  border-radius: 2px;
}

#nice blockquote {
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  border-left: 4px solid #667eea;
  padding: 20px;
  margin: 24px 0;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.1);
}`,

            classic: `/* 经典风格 - 传统稳重 */
#nice {
  padding: 35px;
  font-family: 'SimSun', 'NSimSun', serif;
  font-size: 16px;
  line-height: 2;
  color: #333;
  background: #fefefe;
}

#nice p {
  margin: 20px 0;
  line-height: 2;
  text-indent: 2em;
}

#nice h1 {
  font-size: 22px;
  font-weight: bold;
  color: #000;
  text-align: center;
  margin: 40px 0 25px 0;
  border-bottom: 2px solid #000;
  padding-bottom: 10px;
}

#nice h2 {
  font-size: 18px;
  font-weight: bold;
  color: #444;
  margin: 30px 0 18px 0;
  background: #f5f5f5;
  padding: 8px 15px;
  border-left: 3px solid #888;
}

#nice h3 {
  font-size: 16px;
  font-weight: bold;
  color: #666;
  margin: 25px 0 15px 0;
}

#nice ul, #nice ol {
  margin: 20px 0;
  padding-left: 35px;
}

#nice li {
  margin: 12px 0;
}

#nice a {
  color: #06c;
  text-decoration: underline;
}

#nice a:hover {
  color: #f60;
}

#nice strong {
  color: #c00;
  font-weight: bold;
}

#nice em {
  color: #630;
  font-style: italic;
}

#nice hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 35px 0;
}

#nice blockquote {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 20px;
  margin: 25px 0;
  font-style: italic;
}`
        };

        // 解析Markdown文本
        function parseMarkdown(text) {
            if (!text.trim()) {
                return '<p class="placeholder">请输入内容</p>';
            }

            let html = text
                .split('\n')
                .map(line => {
                    line = line.trim();
                    
                    // 处理一级标题
                    if (line.startsWith('# ')) {
                        return `<h1>${line.substring(2)}</h1>`;
                    }
                    
                    // 处理二级标题
                    if (line.startsWith('## ')) {
                        return `<h2>${line.substring(3)}</h2>`;
                    }
                    
                    // 处理三级标题
                    if (line.startsWith('### ')) {
                        return `<h3>${line.substring(4)}</h3>`;
                    }
                    
                    // 处理无序列表
                    if (line.startsWith('- ')) {
                        return `<li>${line.substring(2)}</li>`;
                    }
                    
                    // 处理有序列表
                    if (/^\d+\.\s/.test(line)) {
                        return `<li>${line.replace(/^\d+\.\s/, '')}</li>`;
                    }
                    
                    // 处理引用
                    if (line.startsWith('> ')) {
                        return `<blockquote>${line.substring(2)}</blockquote>`;
                    }
                    
                    // 处理分隔线
                    if (line === '---' || line === '***') {
                        return '<hr>';
                    }
                    
                    // 处理空行
                    if (line === '') {
                        return '';
                    }
                    
                    // 处理加粗和斜体
                    line = line.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                               .replace(/\*(.*?)\*/g, '<em>$1</em>');
                    
                    // 处理普通段落
                    return `<p>${line}</p>`;
                })
                .join('\n');

            // 清理多余的空行
            html = html.replace(/\n{3,}/g, '\n\n');
            
            return html;
        }

        // 生成带样式的HTML
        function generateStyledHTML(content, css) {
            return `
                <div id="nice">
                    ${content}
                </div>
                <style>${css}</style>
            `;
        }

        // 生成内联样式的HTML（用于复制到公众号）
        function generateInlineStyledHTML(content, css) {
            // 创建临时容器来应用CSS样式
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = `<div id="nice">${content}</div>`;
            
            // 创建style元素并应用CSS
            const style = document.createElement('style');
            style.textContent = css;
            document.head.appendChild(style);
            
            // 获取应用样式后的HTML
            const styledContent = tempDiv.innerHTML;
            
            // 清理
            document.head.removeChild(style);
            
            return styledContent;
        }

        // 更新预览
        function updatePreview() {
            const markdown = markdownInput.value;
            const css = cssInput.value;
            
            if (!markdown.trim()) {
                previewArea.innerHTML = '<p class="placeholder">在左侧输入内容后点击"刷新预览"查看样式效果</p>';
                return;
            }
            
            const parsedHTML = parseMarkdown(markdown);
            const styledHTML = generateStyledHTML(parsedHTML, css);
            previewArea.innerHTML = styledHTML;
        }

        // 复制到剪贴板
        async function copyToClipboard() {
            const markdown = markdownInput.value;
            const css = cssInput.value;
            
            if (!markdown.trim()) {
                alert('请先输入内容');
                return;
            }
            
            try {
                const parsedHTML = parseMarkdown(markdown);
                const styledHTML = generateInlineStyledHTML(parsedHTML, css);
                
                // 创建临时容器用于复制
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = styledHTML;
                tempDiv.style.position = 'absolute';
                tempDiv.style.left = '-9999px';
                document.body.appendChild(tempDiv);
                
                // 选择内容
                const range = document.createRange();
                range.selectNodeContents(tempDiv);
                const selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(range);
                
                // 复制到剪贴板
                const successful = document.execCommand('copy');
                
                // 清理
                document.body.removeChild(tempDiv);
                selection.removeAllRanges();
                
                if (successful) {
                    showCopyNotice();
                } else {
                    // 尝试新的Clipboard API
                    await navigator.clipboard.writeText(styledHTML);
                    showCopyNotice();
                }
            } catch (err) {
                console.error('复制失败:', err);
                alert('复制失败，请手动选择预览区域的内容进行复制');
            }
        }

        // 显示复制成功提示
        function showCopyNotice() {
            copyNotice.classList.add('show');
            setTimeout(() => {
                copyNotice.classList.remove('show');
            }, 3000);
        }

        // 清空内容
        function clearContent() {
            if (confirm('确定要清空所有内容吗？')) {
                markdownInput.value = '';
                cssInput.value = `/* @author W的书房
 * 全局属性
 * 页边距 padding: 30px;
 * 全文字体 font-family: ptima-Regular;
 * 英文换行 word-break: break-all;
 */
#nice {
  counter-reset: counterh1 counterh2;
  padding: 5px 5px;
  font-family: system-ui,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Arial,sans-serif;
  font-size: 16px;
}

#nice p {
  font-family: system-ui,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Arial,sans-serif;
  line-height: 28px;
  font-size: 16px;  
  font-weight: 400;
  color: rgb(0, 0, 0);
}

#nice h1 {
  line-height: 28px;
  border-bottom: 1px solid rgb(37,132,181);
}

#nice h1:before {
  background: rgb(37,132,181);
  color: white;
  counter-increment: counterh1;
  content: 'Part'counter(counterh1); 
  padding: 2px 8px;
}

#nice h1 .content {
  color: rgb(37,132,181);
  margin-left: 8px;
  font-size: 20px;
}

#nice h2 .content {
  font-size: 18px;
  border-bottom: 4px solid rgb(37,132,181);
  padding: 2px 4px;
  color: rgb(37,132,181);
}

#nice h2 .prefix:before {
  counter-increment: counterh2;
  content: counter(counterh2); 
  color:rgb(159,205,208);
  border-bottom: 4px solid rgb(159,205,208);
  font-size: 18px;
  padding: 2px 4px;
}

#nice h3 .content {
  font-size: 16px;
  border-bottom: 1px solid rgb(37,132,181);
  padding: 2px 10px;
  color: rgb(37,132,181);
}

#nice a {
  color:rgb(37,132,181);
  border-bottom: 1px solid rgb(37,132,181);
}

#nice strong {
  color: rgb(37,132,181);
}

#nice em {
  color: rgb(37,132,181);
}

#nice hr {
  border-top: 1px dashed #87c5de;
}

#nice img {
  border: 1px dashed #87c5de;
  border-radius: 4px;
  padding: 5px;
}`;
                previewArea.innerHTML = '<p class="placeholder">在左侧输入内容后点击"刷新预览"查看样式效果</p>';
            }
        }

        // 样式模板选择功能
        function selectStyleTemplate(styleName) {
            // 更新按钮状态
            styleButtons.forEach(btn => {
                btn.classList.remove('active');
                if (btn.dataset.style === styleName) {
                    btn.classList.add('active');
                }
            });
            
            // 应用选中的样式模板
            if (styleTemplates[styleName]) {
                cssInput.value = styleTemplates[styleName];
                updatePreview();
            }
        }

        // 样式按钮点击事件
        styleButtons.forEach(btn => {
            btn.addEventListener('click', () => {
                selectStyleTemplate(btn.dataset.style);
            });
        });

        // 事件监听器
        previewBtn.addEventListener('click', updatePreview);
        copyBtn.addEventListener('click', copyToClipboard);
        clearBtn.addEventListener('click', clearContent);

        // 输入框内容变化时自动更新预览（防抖）
        let debounceTimer;
        markdownInput.addEventListener('input', () => {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(updatePreview, 500);
        });

        cssInput.addEventListener('input', () => {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(updatePreview, 500);
        });

        // 初始化：设置默认示例内容
        window.addEventListener('load', () => {
            markdownInput.value = `# 欢迎使用公众号排版工具

## 功能特点

这是一个专为微信公众号内容创作者设计的排版工具，具有以下特点：

- **Markdown支持**：使用简单的Markdown语法编写内容
- **CSS自定义**：完全自定义CSS样式，打造独特风格
- **实时预览**：即时查看排版效果
- **一键复制**：快速复制到微信公众号编辑器

## 使用方法

1. 在左侧编辑区输入Markdown格式的内容
2. 在下方的CSS编辑区自定义样式
3. 点击"刷新预览"查看效果
4. 满意后点击"复制到公众号"即可使用

## 支持的Markdown语法

- 标题：# 一级标题 ## 二级标题 ### 三级标题
- 列表：- 无序列表 1. 有序列表
- 引用：> 引用内容
- 格式：**加粗** *斜体*
- 分隔线：--- 或 ***`;

            // 自动显示预览
            updatePreview();
        });

        // 快捷键支持
        document.addEventListener('keydown', (e) => {
            // Ctrl+Enter 或 Cmd+Enter 预览
            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
                e.preventDefault();
                updatePreview();
            }
            
            // Ctrl+Shift+C 或 Cmd+Shift+C 复制
            if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'C') {
                e.preventDefault();
                copyToClipboard();
            }
        });
    </script>
</body>
</html>